<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>高亮display</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        body{
            background: black;
        }

        ul{
            list-style: none;
        }

        .wrap {
            margin: 100px auto;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: black;
            overflow: hidden;
            border: 1px solid #fff;
        }

        ul li{
            float: left;
            margin: 0 10px 10px 0;
        }
        a img{
            display: block;
            border:0;
        }


    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
                // $('ul img').hover(function () {  //为啥不行
                $('ul li').hover(function () {
                    $(this).siblings().stop().fadeTo(400, .5);

                },function () {
                    $(this).siblings().stop().fadeTo(400, 1);
                })
        })
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="#"><img src="images/01.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="images/02.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="images/03.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="images/04.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="images/05.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="images/06.jpg" alt="" /></a>
        </li>
    </ul>
</div>
</body>
</html>